<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
		<link rel="stylesheet" href="solar03.css"/>
	</head>
	<body>
		<article class="card card--mercury">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">mercury</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">0.034°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">1,407 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">88 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--venus">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">venus</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">177.3°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">5,832 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">224.7 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--earth">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">earth</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">23.26°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">23.9 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">365.2 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--mars">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">mars</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">25.2°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">24.6 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">687 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--jupiter">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">jupiter</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">3.1°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">9.9 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">4,331 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--saturn">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">saturn</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">26.7°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">10.7 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">10,747 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--uranus">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">uranus</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">97.8°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">17.2 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">30,589 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--neptune">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">neptune</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">28.3°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">16.1 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">59,800 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--pluto">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">pluto</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">122.5°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">153.3 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">90,560 days</span>
		      </div>
		    </div>
		  </div>
		</article>
		<article class="card card--sun">
		  <div class="card__planet">
		    <div class="planet__atmosphere">
		      <div class="planet__surface"></div>
		    </div>
		  </div>
		  <div class="card__info">
		    <h2 class="info__title">sun</h2>
		    <div class="info__form">
		      <div class="info__item">
		        <label class="info__label">Tilt</label><span class="info__line"></span><i class=" tilt__icon fas fa-long-arrow-alt-right"></i><span class="info__detail">0°      </span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Day</label><span class="info__line"></span><span class="info__detail">~600 hours</span>
		      </div>
		      <div class="info__item">
		        <label class="info__label">Year</label><span class="info__line"></span><span class="info__detail">0 days</span>
		      </div>
		    </div>
		  </div>
		</article>
	</body>
</html>